<template>
  <div class="changePwd">
    <el-dialog :visible.sync="visible">
      <div class="panelWrap pwd-con flex flexdc">
        <div class="title flex flexac flexjcsb fs14 cfff fwb pl p-r-20">
          <div>修改密码</div>
          <i class="el-icon-close close" @click="handleCloseDialog" />
        </div>
        <div class="pwd-main">
          <div class="">
            <div class="flex flexac pre m-b-20">
              <span class="name texttr"><span class="mustval">*</span>当前密码：</span>
              <el-input v-model.trim="form.oldPassword" class="input" placeholder="请输入当前密码" :type="pwdshow?'text':'password'" />
              <span class="iconfont pwdshowBtn" :class="pwdshow?'icon-yanjing':'icon-mima-yincang-shuru'" @click="pwdshow=!pwdshow" />
            </div>

            <div class="flex flexac pre m-b-20">
              <span class="name texttr"><span class="mustval">*</span>新密码：</span>
              <el-input v-model.trim="form.newPassword" class="input" placeholder="请输入新密码" :type="pwdshow1?'text':'password'" />
              <span class="iconfont pwdshowBtn" :class="pwdshow1?'icon-yanjing':'icon-mima-yincang-shuru'" @click="pwdshow1=!pwdshow1" />
            </div>

            <div class="flex flexac pre m-b-20">
              <span class="name texttr"><span class="mustval">*</span>确认密码：</span>
              <el-input v-model.trim="form.checkPass" class="input" placeholder="请再次输入新密码" :type="pwdshow2?'text':'password'" />
              <span class="iconfont pwdshowBtn" :class="pwdshow2?'icon-yanjing':'icon-mima-yincang-shuru'" @click="pwdshow2=!pwdshow2" />
            </div>
          </div>
          <div class="flex footerBtn m-t-35">
            <el-button type="success" class="defaultbtn btn" @click="handleSave">更 新</el-button>
            <el-button class="defaultbtn clsoeBtn btn" @click="handleCloseDialog">关 闭</el-button>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>

// import { updateUserPass } from '@/api/baseInfo/authority/user'
import { showNotice } from '@/utils/toolclass'

export default {
  name: 'ChangePwd1',
  props: {
    value: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      pwdshow: false,
      pwdshow1: false,
      pwdshow2: false,
      visible: false,
      formOrgin: {
        oldPassword: '',
        newPassword: '',
        checkPass: ''
      },
      form: { ...this.data }
    }
  },
  watch: {
    visible(v) {
      this.$emit('input', v)
    },
    value(v) {
      this.visible = v
    },
    data(v) {
      this.form = { ...this.formOrigin }
    }
  },
  mounted() {},
  methods: {
    handleSave() {
      if (!this.form.oldPassword) {
        showNotice('error', '提示', '当前密码不能为空')
        return
      }
      if (!this.form.newPassword) {
        showNotice('error', '提示', '新密码不能为空')
        return
      }
      if (!this.form.checkPass) {
        showNotice('error', '提示', '确认密码不能为空')
        return
      } else if (this.form.checkPass !== this.form.newPassword) {
        showNotice('error', '提示', '确认密码输入错误')
        return
      } else {
        updateUserPass(this.form.newPassword, this.form.oldPassword).then(res => {
          if (res.code === '000000') {
            showNotice('success', '提示', '密码修改成功')
            this.$emit('handleRefresh')
            this.$emit('handleCloseDialog')
          } else {
            // showNotice('error', '提示', res.msg)
          }
        })
      }
    },
    handleCloseDialog() {
      this.visible = !this.visible
    }
  }
}
</script>

<style lang='scss'>
@import '@/styles/public.scss';

.changePwd {
  width: 50%;
  margin:  0 auto;
  .pwd-con {
    width: 500px;
    background: #ffffff;
    .input {
      width: 200px;
    }
    .name {
      width: 100px;
    }
    .footerBtn {
      justify-content: center;
      margin-bottom: 40px;
    }
    .pwd-main {
      margin: 20px auto 0;
    }
    .btn {
      width: 100px;
      height: 40px;
      font-size: 16px;
    }
    .pwdshowBtn{
      position: absolute;
      right: 9px;
      cursor: pointer;
    }
  }
}

</style>
